<template>
	<view>
		<view class="my-dialog"  :class="isShowModel ? 'showDialog': '' "     >
			<div class="my-wrapper" :class="[position]" :style="{height:height,width:width}">
				<slot></slot>
				 <view class="close" @click="$emit('close')">
				 	X
				 </view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			 
			};
		},
		props:{
			position:{
				type:String,
				default:'bottom'
			},
			isShowModel:{
				type:Boolean,
				default:false
			},
			height:{
				type:String,
				default:'800rpx'
			},
			width:{
				type:String,
				default:'100%'
			}
		},
		methods:{
			test(){
				console.log('test');
			}
		},
		
	}
</script>

<style>
	
	.my-dialog {
	 	position: fixed;
	 	top: 0;
	 	right: 0;
	 	bottom: 0;
	 	left: 0;
	 	z-index: 1110;
	 	opacity: 0;
	 	outline: 0;
	 	-ms-transform: scale(1.185);
	 	transform: scale(1.185);
	 	backface-visibility: hidden;
	 	perspective: 2000upx;
	 	background: rgba(0, 0, 0, 0.6);
	 	transition: all 0.3s ease-in-out 0s;
	 	pointer-events: none;
		margin-bottom: -1000upx;
		
	 }
	 
	 .my-dialog::before {
	 	content: "";
	 	/* display: inline-block; */
	 	height: 100%;
		position: relative;
	 }
 
	 
	 .my-wrapper {
	 	position: absolute;
	 	width: 100%;
		height: 900rpx;
	 	background-color: #f8f8f8;
	 	border-radius: 10upx;
	 	overflow: hidden;
	 }
	 .top{
		 left: 0;
		 top: 0;
	 }
	 .center{

		 left: 50%;
		 top: 50%;
		 transform: translate(-50%,-50%);
		 width: 70%;
 
	 }
	 .bottom{
		 left: 0;
		 bottom: 0px;
	 }

	 
	 .showDialog{
		 opacity: 1;
		 transition-duration: 0.3s;
		 -ms-transform: scale(1);
		 transform: scale(1);
		 overflow-x: hidden;
		 overflow-y: auto;
		 pointer-events: auto;
		 margin-bottom: 0;
	 }
	 .close{
		 position: absolute;
		 top: 40rpx;
		 right: 40rpx;
		 width: 50rpx;
		 height: 50rpx;
		 font-size: 40rpx;
		 /* border: 1px solid #999999; */
		 padding:  16rpx;
		 border-radius: 80%;
		 text-align: center;
		 line-height: 22rpx;
		 /* background-color: #e6e6e6; */
		 z-index: 99;
		 color: #999;
	 }
</style>
